<%@page import="java.util.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Map</title>
<style>

div {
	position: relative;
}

.map {
	position: absolute;
	z-index: -1;
	top: 0px;
	left: 0px;
}

.log {
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
}

<%

Integer numberOfPlayers = (Integer)request.getSession().getAttribute("numberOfPlayers");
HashMap<String, HashSet<String>> playersCardsList = (HashMap<String, HashSet<String>>)request.getSession().getAttribute("playersCardsList");
ArrayList<String> playerUsernames = (ArrayList<String>) request.getSession().getAttribute("playerUsernames");
int pawn_top_margin = -30;
int pawn_left_margin = -20;

for (int i = 0; i < numberOfPlayers; i++) {
	
	out.println(".pawn" + (i + 1));
	out.println("{");
	out.println("position: absolute;");
	out.println("z-index: 2;");
	out.println("top:" + ((Integer)request.getSession().getAttribute(("top_p" + i)) + pawn_top_margin) + "px;");
	out.println("left:" + ((Integer)request.getSession().getAttribute(("left_p" + i)) + pawn_left_margin) + "px;");
	out.println("}");
	
	out.println(".hand" + (i + 1));
	out.println("{");
	out.println("position: absolute;");
	out.println("z-index: 2;");
	out.println("top: 0px;");
	out.println("left: " + (200 + i*250) + "px;");
	out.println("}");
	
	out.println(".legend" + (i + 1));
	out.println("{");
	out.println("position: absolute;");
	out.println("z-index: 2;");
	out.println("top: 1000px;");
	out.println("left: " + (i*100) + "px;");
	out.println("}");
}

ArrayList<Integer> topDistance = (ArrayList<Integer>)request.getSession().getAttribute("topDistance");
ArrayList<Integer> leftDistance = (ArrayList<Integer>)request.getSession().getAttribute("leftDistance");
ArrayList<Integer> infectionLevel = (ArrayList<Integer>)request.getSession().getAttribute("infectionLevel");
ArrayList<String> diseaseColor = (ArrayList<String>)request.getSession().getAttribute("diseaseColor");
ArrayList<Boolean> hasRC = (ArrayList<Boolean>)request.getSession().getAttribute("hasRC");

int diseaseIndicator_top_margin = 15;
int diseaseIndicator_left_margin = -10;
int rc_top_margin = -10;
int rc_left_margin = -10;

int numberOfCities = topDistance.size();
for (int i = 0; i < numberOfCities; i++) {
	Integer top = topDistance.get(i);
	Integer left = leftDistance.get(i);
	out.println(".diseaseIndicator" + i);
	out.println("{");
	out.println("position: absolute;");
	out.println("z-index: 3;");
	out.println("top:" + (top + diseaseIndicator_top_margin) + "px;");
	out.println("left:" + (left + diseaseIndicator_left_margin) + "px;");
	out.println("}");
	
	if (hasRC.get(i) == true) {
		out.println(".rc" + i);
		out.println("{");
		out.println("position: absolute;");
		out.println("z-index: 2;");
		out.println("top:" + (top + rc_top_margin) + "px;");
		out.println("left:" + (left + rc_left_margin) + "px;");
		out.println("}");
	}
}

%>

</style>
</head>
<body>
<div>

	<img src="Images/Map.png" class="map" width="1920px" height="1080px"></img>
<%

for (int i = 0; i < numberOfPlayers; i++) {
	String username = playerUsernames.get(i);
	out.println("<img src=\"Images/pawn" + (i + 1) + ".png\" class=\"pawn" + (i + 1) + "\" width=\"30px\" height=\"40px\"></img>");
	out.println("<figure class=\"legend" + (i + 1) + "\"><figcaption>" + username + "</figcaption>");
	out.println("<img src=\"Images/pawn" + (i + 1) + ".png\"  width=\"30px\" height=\"40px\"></img>");	
	out.println("</figure>");
}

int j = 1;
for (String name : playersCardsList.keySet()) {
	out.println("<select class=\"hand" + j + "\"> width=\"200px\"");
	out.println("<option selected disabled>" +  name + "'s player cards</option>");
	for (String cardName : playersCardsList.get(name)) {
		out.println("<option disabled>" + cardName + "</option>");
	}
	j++;
	out.println("</select>");
}

for (int i = 0; i < numberOfCities; i++) {
	out.println("<img src=\"Images/" + diseaseColor.get(i) + "Disease" + infectionLevel.get(i) + ".png\" class=\"diseaseIndicator" + i + "\" width=\"30px\" height=\"10px\"></img>");
	if (hasRC.get(i) == true) {
		out.print("<img src=\"Images/rc.png\" class=\"rc" + i + "\" width=\"25px\" height=\"25px\"></img>");
	}
}

%>

<select class="log" width="100">
	<option selected disabled>Game Log</option>
	<% 
	for(String log : ((ArrayList<String>)request.getSession().getAttribute("log"))) {
		out.println("<option disabled>" + log + "</option>");
	}
	%>
</select>

</div>
</body>
</html>